<template>
  <view class="container">
    <view v-if="donghuaXinfeng"
          class="jindutiaoBox">
      <view class="xinfengBox animate__animated"
            :class="{animate__fadeOutDown:modelDisappear}">
        <view class="yidong"></view>
      </view>
    </view>
    <view class="iconBox animate__animated animate__fadeInDown"
          v-if="overJindutiao"
          @tap="handleOpen">
      <image src="../../static/icon/youxiang.png"></image>
      <view>拆 开</view>
    </view>

    <scroll-view v-if="showModle"
                 scroll-y
                 class="model animate__animated animate__fadeInUp"
                 :class="{animate__fadeOutDown:modelDisappear,animate__fadeInUp:!modelDisappear}">
      <view class="que_head">
        <image class="duihuatouxiang"
               src="https://s1.ax1x.com/2022/05/13/ODkvnJ.png">
        </image>
        <view class="que_head_content">
          回答问题，证明你是{{name}}！
          <view class="sanjiao"></view>
        </view>
      </view>

      <view class="questionBox">
        <view class="que_box">
          <image class="duihuatouxiang"
                 src="https://s1.ax1x.com/2022/05/13/ODkvnJ.png">
          </image>
          <view class="que_que_content">
            {{firstQuestion.q}}
            <view class="sanjiao"></view>
          </view>
        </view>
        <view class="options_box">
          <view class="options">
            <view v-for="(item,index) in firstQuestion.a"
                  :key="item.value"
                  class="optionItem"
                  :class="{changeBgc:item.checked}"
                  @tap="handlefirstChoose(index)">
              <view v-if="item.checked"
                    class="circle_checked"></view>
              <view v-else
                    class="circle"></view>
              <view>{{item.value}}. {{item.label}}</view>
            </view>
          </view>
          <view class="yesBtn"
                v-if="!firstRight"
                @tap="handleFirstQueren()">确认</view>
        </view>
      </view>

      <view class="questionBox"
            v-for="(item,que_index) in allQuestion"
            :key="que_index">
        <view class="que_box">
          <image class="duihuatouxiang"
                 src="https://s1.ax1x.com/2022/05/13/ODkvnJ.png">
          </image>
          <view class="que_que_content">
            {{item.q}}
            <view class="sanjiao"></view>
          </view>
        </view>
        <view class="options_box">
          <view class="options">
            <view v-for="(item,index) in item.a"
                  :key="item.value"
                  class="optionItem"
                  :class="{changeBgc:item.checked}"
                  @tap="()=>{if(que_index==allQuestion.length-1)handleOtherChoose(index)}">
              <view v-if="item.checked"
                    class="circle_checked"></view>
              <view v-else
                    class="circle"></view>
              <view>{{item.value}}. {{item.label}}</view>
            </view>
          </view>
          <view class="yesBtn"
                v-if="que_index==allQuestion.length-1"
                @tap="handleOtherQueren()">确认</view>
        </view>
      </view>

    </scroll-view>

    <view v-if="showMark"
          class="mark">
      <view v-if="checkedAnswer=='判断中...'"
            class="juxingBox">
        <view class="juxing"></view>
        <view class="juxing"></view>
        <view class="juxing"></view>
        <view class="juxing"></view>
      </view>
      <view>{{checkedAnswer}}</view>

    </view>

    <view v-if="showPanyaoQuestion"
          class="modledialog">
      <view class="dialog animate__animated animate__slideInLeft">
        <view class="question">
          {{lastQuestion}}
        </view>
        <view class="anser">
          <input v-model="inputAnswer"
                 style="padding: 10rpx; font-size: 30rpx;" />
          <view class="tips">Your answer</view>
          <view class="clear_icon"
                @tap="clearAnswer()">
            <image class="icon"
                   src="../../static/icon/clear.png"
                   mode="aspectFill">
            </image>
          </view>
        </view>
        <view class="btn">
          <view class="quxiao"
                @click="this.showPanyaoQuestion=false">
            取消
          </view>
          <view class="queren"
                @click="checkAnswer()">
            确认
          </view>
        </view>
      </view>
    </view>

    <view v-if="showContent"
          class="content animate__animated animate__fadeInDown">
      <view class="hello">
        {{hello}}
      </view>
      <view class="letterBox">
        <view class="letter0">
          可爱的{{name}}同学：
        </view>
        <view class="letter1">
          <!-- {{content}} -->
          <view v-text="content"
                style="white-space:pre-wrap;"></view>
        </view>
        <view class="letter2">
          <view class="bancircle"></view>
          <view class="bancircle"></view>
          <view class="fengexian">
            <view v-for="item in 20"
                  :key="item"
                  class="xuxian">
            </view>
          </view>
        </view>
        <view class="letter3">
          <image class="byeImage"
                 src="../../static/icon/byebye.png">
          </image>
          <view class="name">
            <view>静静</view>
          </view>
          <view class="time">
            <view>2022/6/10</view>
          </view>
        </view>
      </view>
      <!-- 展示信件的内容{{content}} -->

    </view>

  </view>

</template>

<script>
import { susheInfos } from "../../static/peopleData/peopleInfo";
export default {
  data() {
    return {
      susheINFO: "",
      hello: "早上好！潘潘",
      lastQuestion: "",
      optionAnswer: ["A", "B", "C", "D"],
      name: "",
      donghuaXinfeng: true,
      disappear: false,
      overJindutiao: false,
      showModle: false, //对话框
      //跟答题相关的
      peopleInfo: {},
      lastIndex: 0,
      firstQuestion: {
        q: "（送分题）你的床位是在？",
        a: [
          { value: "A", checked: true, label: "进门右1" },
          { value: "B", checked: false, label: "进门右2" },
          { value: "C", checked: false, label: "进门右3" },
          { value: "D", checked: false, label: "进门左1" },
          { value: "E", checked: false, label: "进门左2" },
          { value: "F", checked: false, label: "进门左3" },
        ],
      },
      firstRight: false,
      //除了第一题，其他的题目
      nowQuestion: {},
      allQuestion: [],
      dijiti: 1,

      nowQuestionRight: [false, false, false],
      /////////////
      showMark: false,
      checkedAnswer: "判断中...",
      ///////
      modelDisappear: false,
      ifCanOpen: false,

      showPanyaoQuestion: false,
      inputAnswer: "",

      content: "",
      contentList: [
        //依次是给潘潘、江荧、秋秋、黄秋燕、敏敏、慧慧的信件
        "\t转眼我们在一起已经超过三年半，我很荣幸能在大学时光里与你作伴，度过了许多开心的日子。\n\t好看的皮囊千篇一律，有趣的灵魂万里挑一，你的有趣和真诚让我们恋爱的日子，每一天都像是日常，又好像每一天都是纪念日，是因为有你在，才会这样的吧。\n\t我会牵挂你关心你，但是我不会粘着你，也会保持热爱生活的态度、努力变优秀的决心，因为我知道这也许就是当初我吸引你的地方。我们一直以来相互包容，不断成长，感情也在心底稳稳扎根，我想带着这份感情，和你一起走未来的路。\n\t武汉就当是我们的一个里程碑，一起加油吧，未来的老公！",
        "\t你是宿舍第一个离开的人，我很遗憾没能和你一起拍毕业照。你一直很会照顾别人，总是能很细心的注意到我、其他室友的情绪。我很开心能够在大学遇见你，认识你。\n\t将来不管你身处何处，也请记得要对自己好，永远把自己当做第一顺位，别让自己受委屈。暂时分开，我们未来有机会再见的！",
        "\t我还记得那天我肚子疼晕倒，是你和江荧送我去校医室，现在回想，觉得有你们作室友是我的福气。希望未来你身边的人也能在你需要帮助的时候予以援手，在你需要依靠的时候给你肩膀。另外我也希望你在以后能更好的给自己的事情做规划，对于要做的事情，抱以更坚定的决心去做，期待你称为更优秀的秋秋！未来再见！",
        "\t在你“边上”睡了多年，就当做我俩是同床共枕了吧。你现在看到这些话的时候，我已经离开宿舍，没有太多煽情的话，因为知道别离无法避免，我只想留下给你的祝福，希望以后你的“KTV”常有好人光顾，希望你常有善人陪伴。未来再见！",
        "\t你知道我会写信，但是你也猜不到我会写什么吧。你一直是是一个很细心、会照顾身边朋友的人，也是一个很有主见的女孩子，能和你成为室友花了我很多运气吧！希望你以后能一直积极向上，在你期望的领域证明自己的价值，不用期待任何人的夸奖，做更优秀的自己。未来再见了！",
        "\t即将离开的这个时候，当我我回想第一次见到你的时候，感觉好像只是昨天才发生的事情，你和最初的时候一样，还是那张可爱纯真的笑脸。和你成为室友，时常有你陪伴，我很开心。希望在将来许多年以后，你也依然保持自己的乐观积极的生活态度，去享受越来越好的生活！未来再见！",
      ],
      showContent: false,
    };
  },
  onLoad(options) {
    let info = JSON.stringify(susheInfos);
    this.susheINFO = JSON.parse(info);
    console.log("selfPage的onload", options, this.susheINFO);
    this.name = options.name;
    // this.name = "慧慧";
    if (options.name == "都不是") {
      this.name = "潘潘";
      setTimeout(() => {
        this.disappear = true;
      }, 2600);
      setTimeout(() => {
        this.donghuaXinfeng = false;
        this.overJindutiao = true;
      }, 3600);
    } else {
      this.susheINFO.forEach((item) => {
        if (item.nickName == this.name) {
          this.peopleInfo = item;
        }
      });
      console.log("用户个人信息", this.peopleInfo);
      console.log("用户的问题信息", this.allQuestion);
      setTimeout(() => {
        this.disappear = true;
      }, 2600);
      setTimeout(() => {
        this.donghuaXinfeng = false;
        this.overJindutiao = true;
      }, 3600);
    }
  },
  methods: {
    makeHello() {
      let time = new Date();
      let hour = time.getHours();
      //   let hour = 0;
      console.log(hour);
      if (0 <= hour && hour < 6) {
        this.hello = "你好，熬夜君——" + this.name;
      }
      if (6 <= hour && hour < 12) {
        this.hello = "早上好！" + this.name;
      }
      if (12 <= hour && hour < 14) {
        this.hello = "中午好！" + this.name;
      }
      if (14 <= hour && hour < 18) {
        this.hello = "下午好！" + this.name;
      }
      if (18 <= hour && hour < 24) {
        this.hello = "晚上好！" + this.name;
      }
    },
    clearAnswer() {
      this.inputAnswer = "";
    },
    checkAnswer() {
      if (this.name == "潘潘" && this.inputAnswer == "你不要这样嘛") {
        console.log("可以打开信封");
        this.ifCanOpen = true;
        this.showPanyaoQuestion = false;
        this.content = this.contentList[0];
        this.makeHello();
        this.showContent = true;
      } else if (
        this.name == "江荧" &&
        this.inputAnswer == "还不是因为你长得不好看"
      ) {
        console.log("可以打开信封");
        this.ifCanOpen = true;
        this.showPanyaoQuestion = false;
        this.content = this.contentList[1];
        this.makeHello();
        this.showContent = true;
      } else if (this.name == "秋秋" && this.inputAnswer == "好你个老六") {
        console.log("可以打开信封");
        this.ifCanOpen = true;
        this.showPanyaoQuestion = false;
        this.content = this.contentList[2];
        this.makeHello();
        this.showContent = true;
      } else if (this.name == "秋燕" && this.inputAnswer == "伤害太高，撤退") {
        console.log("可以打开信封");
        this.ifCanOpen = true;
        this.showPanyaoQuestion = false;
        this.content = this.contentList[3];
        this.makeHello();
        this.showContent = true;
      } else if (this.name == "敏敏" && this.inputAnswer == "那你甭喝了") {
        console.log("可以打开信封");
        this.ifCanOpen = true;
        this.showPanyaoQuestion = false;
        this.content = this.contentList[4];
        this.makeHello();
        this.showContent = true;
      } else if (
        this.name == "慧慧" &&
        this.inputAnswer == "他们说要缝好你的伤，没有人爱小丑"
      ) {
        console.log("可以打开信封");
        this.ifCanOpen = true;
        this.showPanyaoQuestion = false;
        this.content = this.contentList[5];
        this.makeHello();
        this.showContent = true;
      } else {
        uni.showToast({ icon: "error", title: "回答错误", duration: 1500 });
      }
    },
    handleChaikai() {
      if (this.name == "潘潘") {
        this.lastQuestion = "你是潘耀吗？？";
        this.showPanyaoQuestion = true;
      } else {
        this.showModle = true;
      }
    },
    handlefirstChoose(index) {
      if (this.firstRight) {
      } else {
        this.firstQuestion.a[this.lastIndex].checked = false;
        this.lastIndex = index;
        this.firstQuestion.a[index].checked = true;
      }
    },
    handleOtherChoose(index) {
      console.log("----------是第" + this.dijiti + "题");
      console.log("当前的题目", this.allQuestion[this.dijiti - 1]);
      if (this.nowQuestionRight[this.dijiti - 1]) {
      } else {
        this.allQuestion[this.dijiti - 1].a[this.lastIndex].checked = false;
        this.lastIndex = index;
        this.allQuestion[this.dijiti - 1].a[this.lastIndex].checked = true;
      }
    },
    //
    //第一个问题点击确认
    handleFirstQueren() {
      this.showMark = true;
      console.log(this.firstQuestion.a[this.lastIndex]);
      setTimeout(() => {
        if (
          this.peopleInfo.chuangwei ==
          this.firstQuestion.a[this.lastIndex].label
        ) {
          console.log("回答正确");
          this.firstRight = true;
          this.rightFirstQuestion_next();
          this.checkedAnswer = "回答正确,继续下一题";
          //   console.log("第一题的答案", this.allQuestion[0].a);
        } else {
          console.log("回答错误");
          this.checkedAnswer = "回答错误，你可能不是" + this.name;
        }
      }, 1500);
      setTimeout(() => {
        this.showMark = false;
        this.checkedAnswer = "判断中...";
      }, 3000);
      //lastIndex 对应的选项是用户选择的选项
    },
    //
    //第一题回答正确后，进入下一题
    rightFirstQuestion_next() {
      console.log(this.lastIndex);
      this.lastIndex = 0;
      this.allQuestion.push(this.peopleInfo.question[0]); //新增一个问题
    },
    //
    //其它问题的确认
    handleOtherQueren() {
      this.showMark = true;
      //点击确认的时候，需要进行答案的对比
      console.log("进入是第" + this.dijiti + "题");
      console.log("当前的题目", this.allQuestion[this.dijiti - 1]);
      console.log("当前选的答案是", this.optionAnswer[this.lastIndex]);
      let now_que = this.allQuestion[this.dijiti - 1];
      let now_ans = this.optionAnswer[this.lastIndex];
      setTimeout(() => {
        if (now_que.trueA == now_ans) {
          console.log("回答正确，继续下一题");
          this.nowQuestionRight[this.dijiti - 1] = true;
          this.rightOtherQuestion_next();
          if (this.dijiti !== 4) {
            this.checkedAnswer = "回答正确,继续下一题";
            this.lastIndex = 0;
          } else {
            this.checkedAnswer = "";
          }
        } else {
          console.log("回答错误，你真的是" + this.name + "吗？");
          this.checkedAnswer = "回答错误，你真的是" + this.name + "吗？";
        }
      }, 1500);
      setTimeout(() => {
        this.showMark = false;
        this.checkedAnswer = "判断中...";
      }, 3000);
    },
    rightOtherQuestion_next() {
      console.log(this.nowQuestionRight);
      //下一题
      this.dijiti = this.dijiti + 1;
      if (this.dijiti == 4) {
        this.gotoOpen();
      } else {
        this.allQuestion.push(this.peopleInfo.question[this.dijiti - 1]);
        console.log("进入是第" + this.dijiti + "题");
      }
    },
    //
    //
    //如果三题都答对了
    gotoOpen() {
      console.log("去打开信封");
      this.showModle = false;
      this.modelDisappear = true;
      this.ifCanOpen = true;
      uni.showToast({ icon: "success", title: "全部正确！", duration: 2000 });
      //   console.log("可以打开信封");
    },
    handleOpen() {
      if (!this.ifCanOpen) {
        this.handleChaikai(); //拆开前的提问
      } else {
        //真的拆开
        this.handleRealOpen();
      }
    },
    handleRealOpen() {
      console.log("真的可以打开了");
      if (this.name == "潘潘") {
        //可以直接拆开
      } else {
        if (this.name == "江荧") {
          this.lastQuestion = "我为什么要吃饭？";
        }
        if (this.name == "秋秋") {
          this.lastQuestion = "靠近草丛会变得不幸？";
        }
        if (this.name == "秋燕") {
          this.lastQuestion = "别以为我不敢打你？";
        }
        if (this.name == "敏敏") {
          this.lastQuestion = "瓶盖拧不开，帮帮我好吗？";
        }
        if (this.name == "慧慧") {
          this.lastQuestion = "春风又绿江南岸？";
        }
        this.showPanyaoQuestion = true;
        //是我的室友，则需要再次回答问题
      }
    },
    dazi(nowQuestion) {
      let index = 0;
      console.dir(new String());
      let intervalID_ = this.intervalID;
      this.intervalID = setInterval(() => {
        index++;
        this.question = nowQuestion.slice(0, index);
        // console.log(index);
        if (index === nowQuestion.length) {
          clearInterval(intervalID_);
        }
      }, 150);
    },
  },
};
</script>

<style scoped>
.bancircle {
  width: 50upx;
  height: 50upx;
  border-radius: 50%;
  background-color: rgb(222, 222, 222);
  position: absolute;
}
.letter2 > .bancircle:first-child {
  left: -25upx;
}
.letter2 > .bancircle:nth-child(2) {
  right: -25upx;
}

.fengexian {
  width: 500upx;
  height: 4upx;
  background-color: gray;
}
.xuxian {
  width: 25upx;
  height: 4upx;
}
.fengexian > .xuxian:nth-child(even) {
  background-color: rgb(252, 252, 252);
}

.byeImage {
  display: block;
  position: absolute;
  width: 100upx;
  height: 100upx;
  left: 15upx;
}
.hello {
  font-size: 40upx;
  width: 100%;
  height: 70upx;
  /* position: fixed; */
  /* top: 0; */
  /* left: 30upx; */
}
.letterBox {
  width: 600upx;
  /* height: 900upx; */
  /* background-color: rgb(172, 200, 251); */
  /* border: 1px solid black; */
  background-color: rgb(252, 252, 252);
  border-radius: 36upx;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.letter0 {
  width: 600upx;
  height: 50upx;
  line-height: 50upx;
  padding: 30upx 30upx 0upx 30upx;
}
.letter1 {
  box-sizing: border-box;
  padding: 30upx;
  text-align: justify;
  /* letter-spacing: 1upx; */
  /* text-indent: 2rem; */
  line-height: 50upx;
}
.letter2 {
  position: relative;
  width: 600upx;
  height: 50upx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.letter3 {
  position: relative;
  width: 600upx;
  height: 140upx;
  box-sizing: border-box;
  padding: 30upx;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
}
.name,
.time {
  /* background-color: aqua; */
  /* height: 50upx; */
  /* width: 200upx; */
  display: flex;
  justify-content: center;
  align-items: center;
}
.name {
  margin-bottom: 15upx;
}
.time {
  color: gray;
  font-size: 28upx;
}
.content {
  color: rgb(31, 31, 31);
  position: absolute;
  top: 0;
  width: 750upx;
  padding: 25upx;
  box-sizing: border-box;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  flex-direction: column;
  /* background-color: rgb(255, 192, 203); */
  background: linear-gradient(
    to bottom,
    rgb(255, 192, 203),
    rgb(222, 222, 222) 50%
  );
}
.container {
  position: relative;
  background: white;
  flex: 1;
  width: 750upx;
  height: 100vh;
  margin: 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.jindutiaoBox {
  position: relative;
  display: flex;
  align-items: center;
  width: 600upx;
  height: 120upx;
}
.xinfengBox {
  position: relative;
  width: 600upx;
  height: 40upx;
  border-radius: 20upx;
  background-color: pink;
  overflow: hidden;
}
.yidong {
  position: absolute;
  left: -600upx;
  width: 600upx;
  height: 40upx;
  border-radius: 20upx;
  background-color: rgb(239, 90, 115);
  animation: jindutiao 2.5s ease-out;
  animation-fill-mode: forwards;
}
@keyframes jindutiao {
  from {
  }
  to {
    left: 0;
  }
}

.iconBox > image {
  width: 160upx;
  height: 160upx;
}
.iconBox {
  width: 160upx;
  height: 200upx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/*---------------------------*/
.model {
  position: absolute;
  top: 0;
  width: 750upx;
  padding: 20upx;
  box-sizing: border-box;
  height: 100vh;
  display: flex;
  flex: 1;
  flex-direction: column;
  background-color: rgb(153, 192, 238);
}
.que_head {
  height: 115upx;
  width: 710upx;
  /* background-color: rgb(145, 148, 148); */
  display: flex;
  align-items: center;
  margin: 10upx 0;
}
.que_head_content {
  position: relative;
  background-color: white;
  width: 520upx;
  margin-left: 20upx;
  padding: 20upx;
  border-radius: 15upx;
  display: flex;
  align-items: center;
}

.duihuatouxiang {
  width: 110upx;
  height: 110upx;
  border-radius: 50%;
  overflow: hidden;
}
.questionBox {
  width: 710upx;
  /* height: 600upx; */
  display: flex;
  flex-direction: column;
  /* background-color: rgb(251, 216, 163); */
}
.que_box {
  width: 710upx;
  /* height: 180upx; */
  /* background-color: rgb(227, 159, 56); */
  display: flex;

  /* justify-content: center; */
  align-items: center;
  margin: 20upx 0;
}
.que_que_content {
  position: relative;
  background-color: white;
  width: 520upx;
  margin-left: 20upx;
  padding: 20upx;
  border-radius: 15upx;
  display: flex;
  align-items: center;
}
.sanjiao {
  width: 0;
  height: 0;
  border: 20upx solid transparent;
  border-right-color: rgba(255, 255, 255, 1);
  position: absolute;
  left: -35upx;
  top: 50%;
  transform: translateY(-50%);
}

.options_box {
  width: 700upx;
  background-color: white;
  display: flex;
  border-radius: 20upx;
  padding-top: 10upx;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.options {
  width: 660upx;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* background-color: rgb(255, 160, 126); */
}
.optionItem {
  background-color: rgb(255, 255, 255);
  height: 70upx;
  margin: 10upx 0;
  padding: 0 20upx;
  display: flex;
  align-items: center;
  justify-content: left;
  border-radius: 35upx;
}
.circle,
.circle_checked {
  width: 50upx;
  height: 50upx;
  border-radius: 50%;
  margin-right: 10upx;
  box-sizing: border-box;
  border: 6upx solid rgb(255, 140, 159);
  /* border: 18upx solid rgb(255, 140, 159); */
}
.circle_checked {
  /* border: 17upx solid rgb(255, 140, 159); */
  animation: bianda 0.2s ease-in;
  animation-fill-mode: forwards;
}
.changeBgc {
  background-color: rgba(255, 214, 214, 0.5);
}
@keyframes bianda {
  from {
  }
  to {
    border: 17upx solid rgb(255, 140, 159);
  }
}

.yesBtn {
  width: 200upx;
  height: 70upx;
  border-radius: 35upx;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: pink;
  margin: 20upx 0;
}

/*--加载动画-----------------*/
.mark {
  width: 750upx;
  height: 100vh;
  position: absolute;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.juxing {
  width: 30upx;
  height: 30upx;
  background-color: rgb(226, 119, 137);
  margin: 10upx;
}

.juxingBox > .juxing:nth-child(1) {
  animation: juxing1 1s ease-in infinite;
}
.juxingBox > .juxing:nth-child(2) {
  animation: juxing1 1s ease-in infinite;
  animation-delay: 0.3s;
}
.juxingBox > .juxing:nth-child(3) {
  animation: juxing1 1s ease-in infinite;
  animation-delay: 0.6s;
}
.juxingBox > .juxing:nth-child(4) {
  animation: juxing1 1s ease-in infinite;
  animation-delay: 0.9s;
}
@keyframes juxing1 {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(0);
    background-color: transparent;
  }
}

.modledialog {
  color: rgb(38, 38, 38);
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}
.dialog {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  border-radius: 20upx;
  background-color: white;
  height: 400upx;
  width: 650upx;
  overflow: hidden;
}
.question {
  margin-top: 20upx;
  height: 80upx;
  line-height: 80upx;
  background-color: rgb(255, 255, 255);
}
.anser {
  position: relative;
  height: 70upx;
  width: 70%;
  line-height: 70upx;
  background-color: white;
  border: 1upx solid rgb(255, 167, 182);
  border-radius: 35upx;
  display: flex;
  padding-left: 15upx;
  justify-content: left;
  align-items: center;
}
.tips {
  position: absolute;
  font-size: 28upx;
  left: 30upx;
  top: 0;
  background-color: white;
  padding: 0 8upx;
  animation: tapinput 1s linear;
  animation-fill-mode: forwards;
  color: rgb(171, 171, 171);
}

.clear_icon {
  width: 50upx;
  height: 50upx;
  position: absolute;
  right: 15upx;
  z-index: 10;
}
.icon {
  width: 50upx;
  height: 50upx;
}

.btn {
  width: 100%;
  height: 100upx;
  line-height: 100upx;
  display: flex;
  justify-content: space-between;
}
.quxiao,
.queren {
  width: 50%;
  display: flex;
  justify-content: center;
}
.quxiao {
  background-color: rgb(255, 227, 231);
}
.queren {
  background-color: pink;
}

@keyframes tapinput {
  from {
  }
  to {
    top: -38upx;
    left: 30upx;
    color: rgb(255, 167, 182);
  }
}
</style>

